import { useMount, useRequest } from 'ahooks';
import { Descriptions } from 'antd';

import Title from '@/components/title';

import { store } from '@/store';

import { NoticeReadStatus, NoticeReadStatusObj } from '@/enum/notice';
import { sysMessageRecordRead } from '@/services/base/jichumokuaixiaoxijilujiekou';

import styles from './index.module.scss';

type ModalProps = {
  data: BASE.SysMessageRecordEntity;
  onRead: () => void;
};

const Modal: React.FC<ModalProps> = ({ data, onRead }) => {
  const read = useRequest(
    async () => {
      return sysMessageRecordRead({ id: data.id as unknown as string });
    },
    {
      manual: true,
      onSuccess: onRead
    }
  );

  useMount(() => {
    if (String(data.viewed) === NoticeReadStatus.未读) {
      read.run();
    }
  });

  const readObj = NoticeReadStatusObj.get(String(data.viewed));

  return (
    <>
      <Descriptions
        bordered
        size="small"
        items={[
          { label: '消息类型', children: data.messageType },
          { label: '发送时间', children: data.createTime },
          { label: '发送人', children: data.createBy },
          { label: '消息重要等级', children: data.messageLevel },
          { label: '是否已读', children: readObj?.text }
        ]}
      />

      <Title>消息内容</Title>
      <div className={styles['notice-detail']}>
        <div dangerouslySetInnerHTML={{ __html: data.messageContent! }} />
      </div>
    </>
  );
};

export const alert_notice = (props: ModalProps) => {
  return store.modal.open({
    title: props.data.messageTitle,
    width: 800,
    children: <Modal {...props} />
  });
};
